﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <!-- <link rel="stylesheet" href="../styles/table-dark-theme.css"> -->
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>缺件统计看板</title>
</head>

<body>
  <div id="app" v-cloak>
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">缺件统计看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>

    <el-row style="margin-top:0px;">
      <el-col :span="24">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border>
          <el-table-column type="index" width="50px"></el-table-column>
          <el-table-column label="发动机号" prop="attributevalue" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务单号" prop="containerno" width="120"></el-table-column>
          <el-table-column label="任务类型" prop="workflowtype" width="120"></el-table-column>
          <el-table-column label="部件名称" prop="productname" width="120"></el-table-column>
          <el-table-column label="工序号" prop="specno" width="60"></el-table-column>
          <el-table-column label="工序名称" prop="workflowstepname" width="120"></el-table-column>
          <el-table-column label="计划开始时间" prop="plannedstartdate" width="120">
            <template slot-scope="scope" v-if="scope.row.plannedstartdate">
              {{scope.row.plannedstartdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="计划完成时间" prop="plannedfinishdate" width="120">
            <template slot-scope="scope" v-if="scope.row.plannedfinishdate">
              {{scope.row.plannedfinishdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="件号" prop="jh" width="120"></el-table-column>
          <el-table-column label="名称" prop="jhmc" width="120"></el-table-column>
          <el-table-column label="需求数量" prop="firstassembleqty" width="80"></el-table-column>
          <el-table-column label="去封/报工数量" prop="confirmqty" width="120"></el-table-column>
          <el-table-column label="缺件数量" prop="noconfirmqty" width="80"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.currentPage" :page-sizes="[10,18,50,100]" :page-size="queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="total">
        </el-pagination>
        <el-backtop></el-backtop>
      </el-col>
    </el-row>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        dataList: []
      },
      methods: {
        async getData() {
          this.loading = true
          const { data: res } = await axios.post('../handler/board/ZSMissingPartsDashBoard.ashx?action=getData', {
            type: 'getData',
            ...this.queryInfo,
          })
          this.loading = false
          this.dataList = res.data
          this.total = res.total
        },
        handleCurrentChange(newPage) {
          // this.queryInfo.currentPage = newPage;
          // this.getContainerData();
        },
        handleSizeChange(newSize) {
          // this.queryInfo.pageSize = newSize;
          // this.getContainerData();
        }
      },
      mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        this.getData()
      },
      watch: {
        queryInfo: {
          handler() {
            // this.queryInfo.currentPage = 1
          },
          deep: true
        }
      }
    })
  </script>
</body>

</html>